---
import type { Props } from "@astrojs/starlight/props";
import AstrolightSiteTitle from "@astrojs/starlight/components/SiteTitle.astro";

const items = [
  { name: "Apps", href: "/apps" },
  { name: "Packages", href: "/our-packages" },
  { name: "Tips", href: "/tips-and-tricks" },
  { name: "Sponsor", href: "/sponsor" },
];

function pathsMatch(pathA: string, pathB: string): boolean {
  return pathB.includes(pathA);
}
---

<div>
  <AstrolightSiteTitle {...Astro.props} />
  <div class="sl-hidden separator"></div>
  <div class="sl-hidden nav">
    {
      items.map((item) => (
        <a
          href={item.href}
          aria-current={
            pathsMatch(encodeURI(item.href), Astro.url.pathname) && "page"
          }
        >
          <span>{item.name}</span>
        </a>
      ))
    }
  </div>
</div>

<style>
  div {
    display: flex;
    gap: var(--sl-content-pad-x);
    align-items: center;
  }

  div.separator {
    content: "";
    height: 2rem;
    border-inline-end: 1px solid var(--sl-color-gray-5);
  }

  div a {
    text-decoration: none;
    color: var(--sl-color-white);
    font-size: var(--sl-text-base);
    font-weight: 500;
  }

  div a:hover {
    color: var(--sl-color-text-accent);
  }

  [aria-current="page"],
  [aria-current="page"]:hover,
  [aria-current="page"]:focus {
    color: var(--sl-color-text-accent);
  }

  @media (min-width: 50rem) {
    .nav {
      display: flex;
    }
    .separator {
      display: block;
    }
  }
</style>
